/* 基础颜色定义 */
body {
  background-color: #f0f0f2; /* 浅紫色背景 */
  color: #333333; /* 深色文本 */
  font-family: Arial, sans-serif; /* 设置字体 */
}

a {
  color: #663399; /* 深紫色链接 */
  text-decoration: none; /* 移除下划线 */
}

a:hover {
  color: #9933cc; /* 鼠标悬停时的紫色 */
}

/* 导航栏样式 */
body {
  font-family: 'Montserrat', sans-serif;
}
/* 导航栏样式 */
.nav {
  background-color: #e6e6fa; /* 深紫色导航栏背景 */
  color: white; /* 白色文本 */
  padding: 10px 0;
}

.nav ul {
  list-style: none; /* 移除列表项目符号 */
  display: flex; /* 使用弹性盒模型布局 */
  justify-content: center; /* 水平居中 */
  margin: 0;
  padding: 0;
}

.nav ul li {
  margin: 0 10px; /* 列表项之间的间距 */
}
.nav {
  font-family: 'Roboto', sans-serif;
}

.nav ul li a {
	color:#666;
  padding: 10px 15px; /* 增加链接的内边距 */
  border-radius: 5px; /* 添加边框圆角 */
  transition: background-color 0.3s; /* 添加背景颜色过渡效果 */
}

.nav ul li a {
  padding: 10px 15px; /* 增加链接的内边距 */
  border-radius: 5px; /* 添加边框圆角 */
  transition: background-color 0.3s; /* 添加背景颜色过渡效果 */
}

.nav ul li a:hover {
  background-color:  grey;
  color:white; /* 鼠标悬停时的渐变背景颜色 */
}

.nav ul li a {
  position: relative;
}

.nav ul li a::after {
  content: '';
  position: absolute;
  bottom: -5px; /* 下划线位置 */
  left: 0;
  width: 100%;
  height: 2px; /* 下划线宽度 */
  background-color: #fff; /* 下划线颜色 */
  transform: scaleX(0); /* 初始状态下划线宽度为0 */
  transition: transform 0.3s ease; /* 添加下划线宽度变化过渡效果 */
}

.nav ul li a:hover::after {
  transform: scaleX(1); /* 鼠标悬停时下划线宽度为1 */
}

/* 容器样式 */
.container {
  max-width: 800px; /* 设置最大宽度 */
  margin: 20px auto; /* 上下填充20px，水平居中 */
  padding: 20px;
  background-color: white; /* 白色背景 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 盒子阴影效果 */
}

/* 盒子样式 */
.box {
  margin-bottom: 20px; /* 盒子之间的下边距 */
  padding: 20px;
  background-color: #f9f9f9; /* 浅紫色背景 */
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 5px; /* 边框圆角 */
}

.box h6 {
  margin: 5px 0; /* 标题之间的间距 */
}

/* 按钮样式 */
.button {
  background-color: #800080; /* 深紫色按钮背景 */
  color: white; /* 白色文本 */
  padding: 10px 20px;
  border: none; /* 移除边框 */
  border-radius: 5px; /* 边框圆角 */
  text-align: center; /* 文本居中 */
  display: inline-block; /* 行内块布局 */
  margin-top: 10px; /* 上边距 */
  text-decoration: none; /* 移除下划线 */
}

.button:hover {
  background-color: #800080; /* 鼠标悬停时的紫色按钮背景 */
}